<template>
  <div class="component-search-form-layout" v-if="config.manage.hasOwnProperty('search')">
    <Form class="search-form" :model="data">
      <Row>
        <Col :xs="12"
             :sm="12"
             :md="8"
             :lg="8"
             :xl="6"
             :xxl="4"
             v-for="(item,index) in config.manage.search"
             :key="index"
             v-show="index < 5 || open === true">
          <custom-form-item v-model="data[item]"
                            :config="config.fields[item]"></custom-form-item>
        </Col>
        <Col :xs="12"
             :sm="12"
             :md="8"
             :lg="8"
             :xl="6"
             :xxl="6">
          <div class="action">
            <Tooltip placement="top"
                     content="查询">
              <Button @click="search"
                      type="primary"
                      shape="circle"
                      icon="md-search"></Button>
            </Tooltip>
            <Tooltip placement="top"
                     content="保存为快捷查询">
              <Button type="primary"
                      @click="showQuickSearchForm = true"
                      shape="circle"
                      icon="logo-buffer"></Button>
            </Tooltip>
            <Tooltip placement="top"
                     :content="open ? '简略信息' : '展开全部'">
              <Button type="primary"
                      shape="circle"
                      @click="open = !open"
                      :icon="open ? 'md-contract' : 'md-expand'"></Button>
            </Tooltip>
          </div>
        </Col>
      </Row>


    </Form>
    <Modal>
      <Form title="保存为快捷查询"
            :model="quickSearchData"
            v-model="showQuickSearchForm"
            width="300">
        <FormItem>
          <Input placeholder="为快捷查询命名"
                 v-model="quickSearchData.name"></Input>
          <description>保存后，可以在右侧点击快捷查询使用当前搜索条件快速筛选数据。</description>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "SearchForm",
    data() {
      return {
        allowComponent: {
          input: true,
          select: true
        },
        showQuickSearchForm: false,
        quickSearchData: {
          name: ''
        },
        open: true,
        data: {}
      }
    },
    methods: {
      search() {
        this.$emit('search', this.data)
      }
    },
    props: {
      config: {
        type: Object,
        require: true,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style lang="less">
.component-search-form-layout{
  .search-form{
    .ivu-col{
      margin-bottom: @spaceCol;
      .ivu-form-item{
        display: flex;
        justify-content: flex-start;
        padding-right: @spaceCol;
        margin-bottom: 0 !important;
        label{
          white-space: nowrap;
          overflow: hidden;
        }
        .ivu-form-item-content{
          flex: 1;
        }
      }
    }
  }
}
</style>